import React, { Component } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'
import { NavHeader } from '../common'
import { TransactionDetail } from './'

export default class TransactionList extends Component {
  constructor() {
    super()
    this.state = {
      detailModal: false,
    }
  }
  render() {
    const { detailModal } = this.state
    return (
      <div className={`rt-transaction-list-container cm-column-flex-box`}>
        <NavHeader
          title="历史交易"
          onClick={() => {
            hashHistory.goBack()
          }}
        />

        <div className={`rt-hint-message`}>最近30天交易记录</div>

        <div className={`cm-scrollable-container`}>
          <div key={Math.random()} className={`-row-header-box`}>
            <span className={`-date`}>平仓日期</span>
            <span className={`-name`}>商品</span>
            <span>数量</span>
            <span>方向</span>
            <span className={`-delta`}>交易盈亏</span>
            <span></span>
          </div>
          {/****/}
          {
            Array(30).fill(1).map(v => (
              <div
                key={Math.random()}
                className={`-row-box`}
                onClick={() => {
                  this.setState({
                    detailModal: true,
                  })
                }}
              >
                <time>4月11日</time>
                <span className={`-name`}>3KG 工业银</span>
                <span>10手</span>
                <div className={`-updown-box`}>
                  <span>涨</span>
                </div>
                <span className={`-delta-num`}>+24</span>
                <Icon type="right" />
              </div>
            ))
          }
        </div>
        <TransactionDetail
          visible={detailModal}
          onClose={() => {
            this.setState({
              detailModal: false,
            })
          }}
        />
      </div>
    )
  }
}